"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/27
 */
import * as React from 'react'
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import {ConfirmReservePage} from "../../interface/router";
import ReserveRoomItem from "../../component/ReserveRoomItem";
import MyIcon from "../../component/icon";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import T from "../../utils/T";
import {timeAreaStyles} from "../../assets/styles/timeAreaPicker";
import {SCREEN_HEIGHT, SCREEN_WIDTH, NAVBAR_HEIFHT} from "../../constant";
import {reserveStyles} from "../../assets/styles/reserve";
import {TimeAreaPickerResponse} from "../../component/index";
import constant from "../../utils/constant";

const {View, TouchableOpacity} = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {connect} = require('react-redux');

const {List, DatePicker} = require('antd-mobile');
const {KeyboardAwareScrollView} = require('react-native-keyboard-aware-scroll-view');
const moment = require("moment");
const {Toast} = require('antd-mobile');

interface ConfirmReservePageState {
    meetingDesc?: string
    paid?: number,
    selectedDate?: TimeAreaPickerResponse
}

class Page extends React.Component<ConfirmReservePage, ConfirmReservePageState> {

    state = {
        meetingDesc: '',
        paid: this.props.selectDate.duration / 30,
        selectedDate: this.props.selectDate
    };


    componentDidMount(): void {
        this.props.dispatch({
            type:'auth/freshUserInfo'
        })
    }
    onCallback = (meetingDesc) => {
        this.setState({meetingDesc})
    };


    doReserve = () => {

        if (Number(this.props.auth.userInfo.paid) < this.state.paid) {
            Toast.fail('您的配额不足,无法预定', constant.ToastDuration);
            return;
        }

        let end = moment(this.state.selectedDate.start).add(this.state.selectedDate.duration, 'm');
        let payload = {
            room: {id: this.props.selectedRoom.id},
            user: {id: this.props.auth.userInfo.id},
            reserveDate: moment(this.state.selectedDate.date).format('YYYY-MM-DD'),
            start: this.state.selectedDate.start.format('HH:mm'),
            end: end.format('HH:mm'),
            paid: this.state.paid,
            ps: this.state.meetingDesc,
        };
        // console.log(payload,this.state.selectedDate,end);
        this.props.dispatch({
            type: 'room/reserveRoom',
            payload
        })
    };

    onChange = (props: TimeAreaPickerResponse) => {
        this.setState({paid: props.duration / 30, selectedDate: props});
    };


    getExtra = () => {
        let text = '';
        if (this.props.selectedRoom.board) {
            text += T('Whiteboard') + ','
        }
        if (this.props.selectedRoom.phone) {
            text += T('Phone') + ','
        }
        if (this.props.selectedRoom.tv) {
            text += T('TV') + ''
        }
        return text;
    };
    renderHeader = () => {
        return (
            <ReserveRoomItem {...this.props.selectDate}
                             item={this.props.selectedRoom}
                             collapsed={false}
                             timeArea={this.props.timeArea}
                             canPickDate={true}
                             canBook={true}
                             identifier={this.props.selectedRoom.id}
                             onChange={this.onChange}
                             haveNextStep={false}/>
        )
    };

    render() {
        return (
            <View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar}
                               title={{title: '房间号', tintColor: Colors.White}}
                               leftButton={<NavBackButton/>}
                />
                <View style={{width: SCREEN_WIDTH, height: SCREEN_HEIGHT - autoSize(50) - NAVBAR_HEIFHT - 20}}>
                    <KeyboardAwareScrollView>
                        <List renderHeader={this.renderHeader}>

                            <Line height={10} color={Colors.Background}/>
                            {/*预定费用*/}
                            <List.Item>
                                <MyText color={Colors.Black} fontSize={18} fontWeight={'bold'}>预定费用</MyText>
                            </List.Item>
                            <List.Item extra={this.state.paid}>
                                <MyText color={Colors.SubTitle} fontSize={13}>需要配额</MyText>
                            </List.Item>
                            <List.Item>
                                <MyText color={Colors.Title}
                                        fontSize={13}>{`付款方:${this.props.auth.userInfo.nickName}`}</MyText>
                                <List.Item.Brief>{`(这个月还有${this.props.auth.userInfo.paid} 个包括在内的配额)`}</List.Item.Brief>
                            </List.Item>
                            <Line height={10} color={Colors.Background}/>
                            {/*房间详情*/}
                            <List.Item>
                                <MyText color={Colors.Black} fontSize={18} fontWeight={'bold'}>房间详情</MyText>
                            </List.Item>
                            <List.Item>
                                <MyText color={Colors.Title}
                                        fontSize={13}>{`付款方:${this.props.auth.userInfo.nickName}`}</MyText>
                                <List.Item.Brief>{`(${this.props.auth.userInfo.company.address})`}</List.Item.Brief>
                            </List.Item>
                            <List.Item extra={this.props.selectedRoom.seat}>
                                <MyText color={Colors.SubTitle} fontSize={13}>座位</MyText>
                            </List.Item>
                            <List.Item extra={this.getExtra()}>
                                <MyText color={Colors.SubTitle} fontSize={13}>包括</MyText>
                            </List.Item>
                            <List.Item arrow='horizontal'
                                       onClick={Actions.meetingDescription.bind(this, {
                                           callBack: this.onCallback,
                                           value: this.state.meetingDesc
                                       })}>
                                <MyText color={Colors.Title} fontSize={13}>会议说明</MyText>
                            </List.Item>

                            <View style={reserveStyles.tip}>
                                <MyText color={Colors.Title} fontSize={12}>您可以取消该预定，直至预定开始前的60分钟为止。</MyText>
                            </View>
                        </List>
                    </KeyboardAwareScrollView>
                </View>
                <TouchableOpacity
                    style={[timeAreaStyles.actionButton, commonStyles.centerVH, commonStyles.absolute, reserveStyles.reserveBtn]}
                    onPress={this.doReserve}>
                    <MyText color={Colors.White}>确认预定</MyText>
                </TouchableOpacity>
            </View>
        );
    }
}


export default connect(
    ({auth, room}) => ({auth, room})
)(Page);